<template>
	<div
		:style="{
			width: width,
			height: height
		}"
		ref="echartsRef" />
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import { useEcharts, EChartsCoreOption } from '@/hooks/useEcharts'; // 引入hooks

interface IProps {
	options: EChartsCoreOption;
	height?: string;
	width?: string;
	themeColors?: string[];
}
const props = withDefaults(defineProps<IProps>(), {
	height: '100%',
	width: '100%',
	themeColors: () => []
});

const echartsRef = ref();

const { setOptions, initCharts } = useEcharts(echartsRef, props.options);

watch(
	() => props.options,
	(nVal) => {
		let targetOptions: EChartsCoreOption = {};
		if (props.themeColors && props.themeColors.length > 0) {
			targetOptions = { ...nVal };
			targetOptions.color = props.themeColors;
		} else {
			targetOptions = { ...nVal };
		}
		setOptions(targetOptions);
	}
);

onMounted(() => {
	initCharts();
});
</script>
